/*----------------------------chat.less(start)----------------------------*/
@chat-odd-bg:#ddd;
@chat-even-bg:#b8daff;
.chat{
	padding:@px8;
	box-sizing:border-box;
	li{
		margin-bottom: @px24;
		&:after{
			display: table;
		    content: " ";
		    clear: both;
		}
	}
	.chat-photo {
		width: @px40;
		display: inline-block;
		text-align: center;
		float: left;
		img {
			width: 100%;
			border-radius: 100%;
		}
		.chat-photo-author {
			font-size: @font-size-S;
			font-style: normal;
			color:@placeholder;
		}
	}
	.chat-content-box {
		display: inline-block;
		float: left;
		margin-left: @px12;
		width: 70%;
	}
	.chat-content {
		display: inline-block;
		position: relative;
		padding: @px10;
		-webkit-border-radius: @px3;
		-moz-border-radius: @px3;
		border-radius: @px3;

		background-color: @chat-odd-bg;

		&:after {
			border-color:transparent;
			border-right-color:@chat-odd-bg;

			position: absolute;
			right: 100%;
			top: 20%;
			height: 0;
			width: 0;
			content: " ";
			border-width: @px5;
			margin-top: -@px5;
			border-style:solid;
		}
		.chat-content-author {
			display: block;
			position: relative;
			font-style: normal;
			font-size: @font-size-S;
		}
		p {
			line-height: @px24;
			margin: 0;
			padding-top: @px3;
			text-align:left;
			[data-emoji]{
				width:@px26;
				height: @px24;
			}
		}
	}

	.even{
		.chat-photo {
			float: right;
		}
		.chat-content-box {
			width: 70%;
			margin-right: @px12;
			text-align: right;
			float: right;
		}
		.chat-content{
			background-color:@chat-even-bg;
			&:after {
				left: 100%;
				top: 20%;
				border-color: transparent;

				border-left-color: @chat-even-bg;
			}
		}
	}

}
/*----------------------------chat.less(end)----------------------------*/
